import React, { Component } from 'react';
import styles from './index.css';
import _ from 'lodash';
import { connect } from 'dva';
import { Select } from 'antd';
import { FormComponentProps } from 'antd/lib/form';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import 'moment/locale/zh-cn';
import { DeviceTypeItem, ConnectState, AreaOptionItem } from '@/models/connect';
import { DeviceInfo } from '@/models/device';
import MapForm from '@/components/MapFormComponent';
import { Dispatch, AnyAction } from 'redux';
import moment from 'moment';
moment.locale('zh-cn');

const { CstInput, CstSelect, CstDatePicker, CstCascader } = MapForm;

interface BaseFormProps {
  // deviceTypeNo?: number;
  onCreate: (form?: FormComponentProps['form']) => void;
  deviceInfo: DeviceInfo;

  areaOptions: AreaOptionItem[];
  deviceTypeNoOptions: DeviceTypeItem[];

  dispatch: Dispatch<AnyAction>;
}

interface BaseFormState {}
@connect(({ device, statistics }: ConnectState) => ({
  deviceTypeNoOptions: device.deviceTypeNoOptions,
  longDeviceType: statistics.longDeviceType,
  childList: device.matchChildsByParents,
  // areaOptions: device.areaOptions,
  areaOptions: statistics.treeTypeData,
}))
class BaseForm extends Component<BaseFormProps, BaseFormState> {
  passNode(text: BaseFormProps) {
    console.log(text);
    this.props.passNodeWay(text); //这个地方把值传递给了props的事件当中
  }
  handleDeviceTypeChange: (e: React.ChangeEvent<HTMLInputElement>) => void = e => {
    const { deviceInfo, childList } = this.props;
    console.log(deviceInfo);
    const _id = e;
    const ITEM = _.find(childList, (i: any) => i.deviceTypeNo === _id); //拿到从当前资产种类中带出的 其他信息字段数据
    this.passNode(ITEM && ITEM.extendedField ? JSON.parse(ITEM.extendedField) : {});
  };
  handleDeviceParentTypeChange: (e: React.ChangeEvent<HTMLInputElement>) => void = e => {
    const { dispatch } = this.props;
    dispatch({ type: 'device/clearChildren' }); // 先清空资产种类
    dispatch({ type: 'device/matchChildsByParents', payload: { deviceTypeNo: e } }); // 再请求
  };
  async componentWillMount() {
    const { childList, deviceInfo, areaOptions, dispatch } = await this.props;
    if (!!deviceInfo.deviceTypeNo) {
      const ITEM = _.find(childList, (e: any) => e.deviceTypeNo === deviceInfo.deviceTypeNo); //拿到从当前资产种类中带出的 其他信息字段数据
      // this.passNode.bind(this, ITEM ? JSON.parse(ITEM.extendedField) : {})
      this.passNode(ITEM ? JSON.parse(ITEM.extendedField) : {});
    }
    dispatch({
      type: 'statistics/treeTypeSelectAll',
    }).then(() => {
      console.log(areaOptions);
    });
  }
  componentWillReceiveProps(next) {
    if (!!next.deviceInfo.deviceTypeNo) {
      const { childList } = this.props;
      const ITEM = _.find(childList, (e: any) => e.deviceTypeNo === next.deviceInfo.deviceTypeNo); //拿到从当前资产种类中带出的 其他信息字段数据
      this.passNode(ITEM && ITEM.extendedField ? JSON.parse(ITEM.extendedField) : {});
    }
  }
  render() {
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
    };
    const { longDeviceType, childList, onCreate, areaOptions, deviceInfo } = this.props;
    return (
      <div className={styles.container}>
        <MapForm className="map-form" onCreate={onCreate}>
          <CstInput
            formItemLayout={formItemLayout}
            label="序号"
            name="sort"
            defaultValue={deviceInfo.sort}
            customProps={{
              type: 'number',
            }}
            rules={[
              {
                required: true,
                message: '序号不能为空',
              },
              {
                max: 6,
                message: '最多输入6位序号',
              },
            ]}
          />
          <CstSelect
            formItemLayout={formItemLayout}
            label="资产类别"
            className="form_select"
            name="deviceTypeParentNo"
            defaultValue={
              deviceInfo.deviceTypeParentNo
                ? deviceInfo.deviceTypeParentNo + ''
                : deviceInfo.deviceTypeParentNo
            }
            rules={[
              {
                required: true,
                message: '请选择资产类别',
              },
            ]}
            onChange={this.handleDeviceParentTypeChange}
            getPopupContainer={triggerNode => triggerNode.parentNode}
          >
            {_.map(longDeviceType, (item: DeviceTypeItem, index: number) => (
              <Select.Option key={index} value={item.deviceTypeNo}>
                {item.deviceTypeName}
              </Select.Option>
            ))}
          </CstSelect>
          <CstSelect
            formItemLayout={formItemLayout}
            label="资产种类"
            name="deviceTypeNo"
            className="form_select"
            defaultValue={deviceInfo.deviceTypeNo}
            rules={[
              {
                required: true,
                message: '请选择资产种类',
              },
            ]}
            getPopupContainer={triggerNode => triggerNode.parentNode}
            onChange={this.handleDeviceTypeChange}
          >
            {_.map(childList, (item: DeviceTypeItem, index: number) => (
              <Select.Option key={index} value={item.deviceTypeNo}>
                {item.deviceTypeName}
              </Select.Option>
            ))}
          </CstSelect>

          <CstInput
            formItemLayout={formItemLayout}
            label="设备名称"
            name="deviceName"
            defaultValue={deviceInfo.deviceName}
            rules={[
              {
                required: true,
                message: '请选择设备名称',
              },
              {
                max: 20,
                message: '最多输入20位中文名',
              },
            ]}
          />
          <CstSelect
            formItemLayout={formItemLayout}
            label="品牌"
            name="brandNo"
            className="form_select"
            defaultValue={deviceInfo.brandNo}
            rules={[
              {
                required: true,
                message: '请选择品牌',
              },
            ]}
            getPopupContainer={triggerNode => triggerNode.parentNode}
          >
            {_.map(JSON.parse(localStorage.brandDict), (item: any, index: number) => (
              <Select.Option key={index} value={item.dictValue}>
                {item.dictLabel}
              </Select.Option>
            ))}
          </CstSelect>

          <CstInput
            formItemLayout={formItemLayout}
            label="厂商唯一编号"
            name="serialNumber"
            defaultValue={deviceInfo.serialNumber}
            rules={[
              {
                required: true,
                message: '厂商唯一编号不能为空',
              },
              {
                max: 64,
                message: '最多输入64位唯一编号',
              },
            ]}
          />
          <CstInput
            formItemLayout={formItemLayout}
            label="型号"
            name="model"
            defaultValue={deviceInfo.model}
            rules={[
              {
                max: 16,
                message: '最多输入16位',
              },
            ]}
          />
          <CstInput
            formItemLayout={formItemLayout}
            label="规格"
            name="specs"
            defaultValue={deviceInfo.specs}
            rules={[
              {
                max: 16,
                message: '最多输入16位',
              },
            ]}
          />
          <CstInput
            formItemLayout={formItemLayout}
            label="生产单位"
            name="productionCompany"
            defaultValue={deviceInfo.productionCompany}
            rules={[
              {
                max: 128,
                message: '最多输入128位',
              },
            ]}
          />
          <CstDatePicker
            formItemLayout={formItemLayout}
            customProps={{ locale: locale }}
            label="生产日期"
            name="productionTime"
            placeholder="请选择日期"
            defaultValue={deviceInfo.productionTime && moment(deviceInfo.productionTime)}
            getCalendarContainer={triggerNode => triggerNode.parentNode}
          />
          <CstInput
            formItemLayout={formItemLayout}
            label="供货单位"
            name="supplyCompany"
            defaultValue={deviceInfo.supplyCompany}
            rules={[
              {
                max: 128,
                message: '最多输入128位',
              },
            ]}
          />
          <CstDatePicker
            formItemLayout={formItemLayout}
            label="采购日期"
            name="purchaseTime"
            placeholder="请选择日期"
            customProps={{ locale: locale }}
            defaultValue={deviceInfo.productionTime && moment(deviceInfo.purchaseTime)}
            getCalendarContainer={triggerNode => triggerNode.parentNode}
          />
          <CstInput
            formItemLayout={formItemLayout}
            label="维护周期"
            name="maintenanceCycle"
            defaultValue={deviceInfo.maintenanceCycle}
            rules={[
              {
                max: 16,
                message: '最多输入16位',
              },
            ]}
          />
          <CstSelect
            formItemLayout={formItemLayout}
            label="单位名称"
            name="unitNameId"
            className="form_select"
            defaultValue={deviceInfo.unitNameId}
            getPopupContainer={triggerNode => triggerNode.parentNode}
          >
            {_.map(JSON.parse(localStorage.unitNameDict), (item: any, index: number) => (
              <Select.Option key={index + new Date().getTime()} value={item.dictValue}>
                {item.dictLabel}
              </Select.Option>
            ))}
          </CstSelect>
          <CstSelect
            formItemLayout={formItemLayout}
            label="所属部门"
            name="departmentId"
            className="form_select"
            defaultValue={deviceInfo.departmentId}
            getPopupContainer={triggerNode => triggerNode.parentNode}
          >
            {_.map(JSON.parse(localStorage.deptDict), (item: any, index: number) => (
              <Select.Option key={index} value={item.sdtDeptId}>
                {item.sdtDeptName}
              </Select.Option>
            ))}
          </CstSelect>
          <CstInput
            formItemLayout={formItemLayout}
            label="使用年限"
            name="serviceLife"
            defaultValue={deviceInfo.serviceLife}
            rules={[
              {
                max: 16,
                message: '最多输入16位',
              },
            ]}
          />
          <CstInput
            formItemLayout={formItemLayout}
            label="使用负责人"
            name="useUser"
            defaultValue={deviceInfo.useUser}
            rules={[
              {
                max: 32,
                message: '最多输入32位',
              },
            ]}
          />
          <CstDatePicker
            formItemLayout={formItemLayout}
            label="投入使用日期"
            name="useTime"
            placeholder="请选择日期"
            customProps={{ locale: locale }}
            defaultValue={deviceInfo.productionTime && moment(deviceInfo.useTime)}
            getCalendarContainer={triggerNode => triggerNode.parentNode}
          />
          {/* <CstSelect
            formItemLayout={formItemLayout}
            label="安装区域"
            name="treeTypeId"
            className="form_select"
            defaultValue={deviceInfo.treeTypeId}
            getPopupContainer={triggerNode => triggerNode.parentNode}
          >
            {_.map(areaOptions, (item: AreaOptionItem, index: number) => (
              <Select.Option key={index} value={item.treeTypeId}>
                {item.treeName}
              </Select.Option>
            ))}
          </CstSelect> */}
          <CstCascader
            formItemLayout={formItemLayout}
            label="安装区域"
            name="treeTypeId"
            className="form_select"
            placeholder="请选择安装区域"
            defaultValue={deviceInfo.treeTypeIdStr && deviceInfo.treeTypeIdStr.split('/')}
            fieldNames={{ label: 'treeName', value: 'treeTypeId', children: 'children' }}
            onChange={(val: any) => {
              console.log(val);
            }}
            options={areaOptions}
          />
          <CstInput
            formItemLayout={formItemLayout}
            label="详细位置"
            name="positionDetails"
            defaultValue={deviceInfo.positionDetails}
            rules={[
              {
                max: 128,
                message: '最多输入128位',
              },
            ]}
          />
        </MapForm>
      </div>
    );
  }
}

export default BaseForm;
